<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="1000px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <div class="tabel_box">
        <div class="tabel_box_h">
          <el-form ref="form" :inline="true" :model="form" :rules="rules" :disabled="disabled"
            :label-width="labelWidth">
            <el-form-item label="用户手机号:" prop="">
              <el-input v-model="form.customerPhone" clearable placeholder="请输入用户手机号" :style="{width: inputWidth}" />
            </el-form-item>
            <el-form-item label="发放时间:" prop="">
              <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="wdith: 180px">
              </el-date-picker>
            </el-form-item>
            <el-button type="primary" size="small" style="margin: 0 0px 0 20px" @click="handleQuery">查 询
            </el-button>
          </el-form>
        </div>
        <export-excel-button size='small' title="发放明细" action="/platform/asset/apply/issue/record/export"
          :params="ExportParams" style="margin-bottom: 20px" />
        <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="用户姓名" align="center" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="customerPhone" :show-overflow-tooltip="true" />
          <el-table-column :label="lableText" align="center" prop="issueAmount" :show-overflow-tooltip="true" />
          <el-table-column label="发放状态" align="center" prop="" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <dict-tag :options="statusType" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="发放时间" align="center" prop="time" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import {
    applyIssueRecord
  } from "@/api/integralOperation";
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  export default {
    // dicts: ['asset_card_type'],
    name: "dialogwhiteList",
    components: {
      ExportExcelButton,
    },
    data() {
      return {
        date: [],
        labelWidth: '90px',
        inputWidth: '200px',
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "发放明细",
        // 是否显示弹出层
        visible: false,
        // 总条数
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        //数组
        tabelList: [],
        // 表单参数
        form: {
          applyId: '', //申请id
          customerPhone: '', //手机号
          startTime: '', //时间开始时间
          endTime: '', //时间结束时间
        },
        // 表单校验
        rules: {

        },
        statusType: [],
        lableText: '',
      };
    },
    created() {

    },
    computed: {
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.form,
          ...this.queryParams
        };
        return params;
      },
    },
    methods: {
      /** 打开弹窗 */
      open(id,insType) {
        this.reset();
        this.form.applyId = id
        this.getDict()
        this.getList()
        this.visible = true
        console.log('insType',insType)
        if(insType == 1){
          this.lableText = '发放CoCo数量'
        }else if(insType == 2){
          this.lableText = '发放椰分数量'
        }
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      //获取状态字典
      getDict() {
        var dictType = "platform_asset_apply_customer_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.statusType = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //获取列表
      getList() {
        this.loading = true
        if (this.date!=undefined && this.date.length > 0) {
          this.form.startTime = this.date[0]
          this.form.endTime = this.date[1]
        }else{
          this.form.startTime = ''
          this.form.endTime = ''
        }
        let data = {
          ...this.form,
          ...this.queryParams
        }
        applyIssueRecord(data).then(response => {
          this.tabelList = response.result.records
          this.total = response.result.total;
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList()
      },
      // 表单重置
      reset() {
        this.date = []
        this.form = {
          applyId: '', //申请id
          customerPhone: '', //手机号
          startTime: '', //时间开始时间
          endTime: '', //时间结束时间
        }
      },
    }
  };

</script>
<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  .tabel_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .icon_yes {
    font-size: 30px;
    color: #67c23a;
  }

  .icon_no {
    font-size: 30px;
    color: #f56c6c;
  }

</style>
